<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0px;
				margin: 0px;
			}
			#div
			{
				margin: 0 auto;
				width: 300px;
				height: 520px;
				background-color: aqua;
				text-align: center;
				padding: 30px;
				
			}
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				var prev=document.getElementById("prev");
				var next=document.getElementById("next");
				//要切换图片就是要修改img标签的src属性
				var img=document.getElementsByTagName("img")[0];   //返回的一定是数组，即使只有一张图片
				//创建一个数组，用来保存图片的路径
				var imgArr=["../img/富尔恣.png","../img/穆雷.png","../img/沃克.png","../img/小波特.png"];
				//创建一个变量，用来保存当前正在显示的图片的索引
				var index=0;
				
				var p=document.getElementById("p");
				var pArr=["一共4张图片，当前第1张","一共4张图片，当前第2张","一共4张图片，当前第3张","一共4张图片，当前第4张"];
				
				
				prev.onclick=function()
				{
					if(index>0)
					{
					    index--;
					    img.src=imgArr[index];
						p.innerHTML=pArr[index];
					}
					else
					{
						index=3;
						img.src=imgArr[index];
						p.innerHTML=pArr[index];
					}
					
				}
				next.onclick=function()
				{
					if(index==3)
					{
						index=0;
						img.src=imgArr[index];
						p.innerHTML=pArr[index];
					}
					else
					{
						index++;
					    img.src=imgArr[index];
						p.innerHTML=pArr[index];
					}
					
				}
			}
		</script>
	</head>
	<body>
		<div id="div">
			<p>一共4张图片，当前第1张</p>
			<img src="../img/富尔恣.png" alt="富尔恣">
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
		</div>
	</body>
</html>